<template>
  <swiper :options="swiperOption" class="banner" >
    <swiper-slide class="cd">
      <div class="warpper" ref="cdWarpper">
        <img :src="this.currentSong.picUrl" alt="">
      </div>
      <p>{{this.getFirstLyric()}}</p>
    </swiper-slide>
    <swiper-slide class="lyric" ref="lyric">
      <ScrollView ref="scrollView">
      <ul>
        <li v-for="(value, key) in currentLyric" :key="key" :class="{'active':currentLineNum === key}">{{value}}</li>
      </ul>
      </ScrollView>
    </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide} from 'vue-awesome-swiper';
import ScrollView from '../ScrollView.vue'
import {mapGetters} from 'vuex'
export default {
  name:"PlayerMiddle",
  data () {
    return {
      //ScrollView配置
      swiperOption: {
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
          bulletClass: 'my-bullet',
          bulletActiveClass: 'my-bullet-active'
        },
        observer: true,
        observeParents: true,
        observeSlideChildren: true
      },
      currentLineNum: '0' //用于定位高亮歌词
    }
  },
  methods:{
    //获取第一句歌词, 用于界面显示
    getFirstLyric () {
      for (let key in this.currentLyric) {
        //第一个循环直接return则是对象中第一个
        return this.currentLyric[key]
      }
    },
    //获取需要可高亮的歌词
    getActiveLineNum(lineNum){
      //防止lineNum--变成负数
      if (lineNum < 0) {
        return this.currentLineNum
      }
      //通过lineNum(匹配歌词的key)获取歌词中的行
      let result = this.currentLyric[lineNum + ''];
      //匹配不到可高亮歌词,递归获取上一行歌词
      if (result === undefined || result === '') {
        lineNum--
        return this.getActiveLineNum(lineNum)
      } 
      else { //匹配到可高亮歌词
        return lineNum + ''
      }
    }
  },
  props:{
    //audio播放时间进度
    currentTime:{
      type:Number,
      required:true,
      default:0
    }
  },
  components: {
    swiper,
    swiperSlide,
    ScrollView
  },
  computed:{
    ...mapGetters([
      'isPlaying',
      'currentSong',
      'currentLyric'
      ])
  },
  watch:{
    //isPlaying -歌曲是否播放
    //控制图片旋转
    isPlaying(newValue,oldValue){
      if(!newValue){
        this.$refs.cdWarpper.classList.remove('active');
      }else{
        this.$refs.cdWarpper.classList.add('active');
      }
    },
    //currentTime - audio播放时间进度
    //函数功能如下 1 2
    currentTime(newValue,oldValue){
      //1.高亮歌曲同步
      let lineNum = Math.floor(newValue); //获取整数的歌词key值
      this.currentLineNum = this.getActiveLineNum(lineNum);//修改currentLineNum===key高亮歌词
      //2.歌词滚动同步
      let currentLyricTop = document.querySelector('li.active').offsetTop;
      let lyricHeight = this.$refs.lyric.$el.offsetHeight;
      //高亮歌词超过滚动界面一半时,开始滚动界面
      if(currentLyricTop>lyricHeight/2){
        this.$refs.scrollView.scrollTo(0,lyricHeight/2-currentLyricTop,100)
      } else {//往回点击进度条不超过一半则回去最前面
        this.$refs.scrollView.scrollTo(0, 0, 100)
      }

    //  let currentLyricTop = document.querySelector('.lyric .active').offsetTop
    //   let lyricHeight = this.$refs.lyric.$el.offsetHeight
    //   if (currentLyricTop > lyricHeight / 2) {
    //     this.$refs.scrollView.scrollTo(0, lyricHeight / 2 - currentLyricTop, 100)
    //   } else {
    //     this.$refs.scrollView.scrollTo(0, 0, 100)
    //   }
    },
    //设置currentLineNum(歌词索引默认为0)
    //获取第一句歌词的时间(key值),防止起始歌词不是0
    currentLyric(newValue,oldValue){
      for(let key  in newValue){
        this.currentLineNum = key;
        return
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/css/mixin";
@import "../../assets/css/variable";
.banner{
  position: fixed;
  top: 150px;
  bottom: 250px;
  left: 0;
  right: 0;
  .cd{
    .warpper{
      width: 500px;
      height: 500px;
      border: 30px solid #fff;
      border-radius: 50%;
      margin: 0 auto;
      overflow: hidden;
      animation: sport 3s linear infinite;
      animation-play-state: paused;//动画暂停
      &.active{
        animation-play-state: running;//动画执行
      }
    }
    img{
      width: 100%;
      height: 100%;
    }
    p{
      text-align:center;
      margin-top: 50px;
      @include font_size($font_medium);
      @include font_color()
    }
  }
  .lyric{
    li{
      text-align: center;
      @include font_size($font_medium);
      @include font_color();
      margin:10px 0;
      &:last-of-type{
        padding-bottom: 50%
      }
      &.active{
        color:#fff;
      }
    }
  }
  //图片旋转动画
  @keyframes sport {
    from{
      transform: rotate(0deg);
    }to{
      transform: rotate(360deg);
    }
  }
}
</style>
//scrollView组件样式
<style lang="scss">
  @import "../../assets/css/mixin";
.my-bullet{
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #fff;
  margin: 0 20px;
}
.my-bullet-active{
  width: 60px;
  @include bg_color();
}
</style>